<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <zh-form
      :model="queryParam"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      style="width: 100%; textalign: 'center'; height: 100%"
      :rules="rules"
    >
      <div class="r-wrap">
        <!--<ul class="r-nav">-->
        <!--  <li-->
        <!--    :class="{ active: tabKey === item.key }"-->
        <!--    v-for="(item, index) in tabList"-->
        <!--    :key="index"-->
        <!--    @click="handleTabClick(item.key)"-->
        <!--  >-->
        <!--    {{ item.name }}-->
        <!--  </li>-->
        <!--</ul>-->
        <div class="tabs-box">
          <a-button
            type="primary"
            class="tabs-item"
            v-for="(item, index) in tabList"
            :key="index"
            :ghost="tabKey !== item.key"
            @click="handleTabClick(item.key)"
          >
            {{ item.name }}
          </a-button>
        </div>
        <div class="r-content">
          <div v-if="tabKey === 'baseInfo'">
            <pointInfoBaseInfo ref="pointInfoBaseInfoRef" :c0303="c0303" :flag="flag" :classify="classify"/>
          </div>
          <div v-show="tabKey === 'mediaInfo'">
            <pointInfoMediaInfo ref="mediaInfoRef" />
          </div>
          <div v-show="tabKey === 'responsibility'">
            <pointInfoResponsibility ref="responsibilityRef" />
          </div>
          <div v-show="tabKey === 'monitor'">
            <pointInfoMonitor ref="monitorRef" />
          </div>
          <div v-if="tabKey === 'scope'">
            <pointInfoScope ref="scopeRef" :data="dateList" :b0119Data="b0119Data" :b0120Data="b0120Data" @saveFileList1="saveFileList1" @saveFileList2="saveFileList2" :file-list1="pointInfoScopeFileList1" :file-list2="pointInfoScopeFileList2"/>
          </div>
          <div v-if="tabKey === 'spatialEditing'">
            <spatial-editing ref="spatialEditing" :relateId="b0101"/>
          </div>
        </div>
      </div>
    </zh-form>
  </div>
</template>
<script>
import zh_cn from "ant-design-vue/es/date-picker/locale/zh_CN";
import pointInfoBaseInfo from "@/pages/system/form/pointInfoBaseInfo";
import pointInfoMediaInfo from "@/pages/system/form/pointInfoMediaInfo";
import pointInfoResponsibility from "@/pages/system/form/pointInfoResponsibility";
import pointInfoMonitor from "@/pages/system/form/pointInfoMonitor";
import pointInfoScope from "@/pages/system/form/pointInfoScope";
import SpatialEditing from "@/pages/system/form/SpatialEditing";
import { getPointInfo } from "@/services/system/whdngxlApi";

export default {
  name: "pointInfo",
  components: {
    pointInfoBaseInfo,
    pointInfoMediaInfo,
    pointInfoResponsibility,
    pointInfoMonitor,
    pointInfoScope,
    SpatialEditing
  },
  props: {
    c0303: {
      required: false,
      type: String,
    },
    classify: {
      required: false,
      type: String,
      default: ()=>{
        return '1'
      }
    },
    b0101: {
      required: false,
      type: Number,
      default: () => {
        return null;
      },
    },
    // true 不可编辑 ,false 可编辑
    saveFlag: {
      required: false,
      type: Boolean,
      default: () => {
        return false;
      },
    },
    flag: {
      required: false,
      type: String,
      default: () => {
        return undefined;
      },
    },
  },
  data() {
    return {
      local: zh_cn,
      dictData: {
        orgId: [],
        AAA027: [],
        AAB301: [],
        ckeckToken: [],
        checkScope: [],
      },
      isBtnLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      // 查询参数
      queryParam: {
        appName: "",
      },
      rules: {
        /*  orgId2s: [{required: true, message: '请选择所属组织进行查询'}],*/
      },
      tabList: [
        { name: "基本信息", key: "baseInfo" },
        { name: "媒体信息", key: "mediaInfo" },
        { name: "责任矩阵", key: "responsibility" },
        { name: "监测设备", key: "monitor" },
        { name: "保护范围", key: "scope" },
        { name: "空间编辑", key: "spatialEditing" },
      ],
      tabKey: "baseInfo",
      modalTitle: "",
      modalVisible: false,
      dateList: {
        b0101: 0,
        b0102: "",
        b0103: "",
        b0104: "",
        b0105: "",
        b0106: "",
        b0107: "",
        b0108: "",
        b0109: "",
        b0110: "",
        b0111: "",
        b0112: "",
        b0113: "",
        b0114: "",
        b0115: "",
        b0116: "",
        b0117: "",
        b0118: "",
        b0119: "",
        b0120: "",
        b0121: "",
        b0122: "",
        b0123: "",
        c0303: "",
        b0125: "",
        b0126: "",
        b0127: "",
        b0128: "",
        b0133: "1",
        //多媒体
        /**
         {
          b0201: '',
          b0101: '',
          b0202: '',
          b0203: '',
          b0205: '',
          b0206: '',
        }
         * */
        b02VOList: [],
        //检测设备
        /**
         {
          b0301: '',
          b0302: '',
          b0303: '',
          b0304: '',
          b0305: '',
          b0306: '',
          b0307: '',
          b0308: '',
          b0309: '',
          b0310: '',
          b0101: '',
        }
         * */
        b03VOList: [],
      },
      pointInfoScopeFileList1: [],
      pointInfoScopeFileList2: [],
      b0119Data: [],
      b0120Data: [],
    };
  },
  mounted() {},
  created() {
    this.init();
  },
  methods: {
    saveFileList1(fileList){
      this.pointInfoScopeFileList1 = fileList
    },
    saveFileList2(fileList){
      this.pointInfoScopeFileList2 = fileList
    },
    init() {
      const params = {};
      params.dictFields = "AAB301,AAA027";
      this.dateList.b0101 = this.b0101;
      this.getDateList();
    },
    loadMethod() {
      this.isBtnLoading = !this.isBtnLoading;
    },
    showOrHide() {
      this.modalVisible = !this.modalVisible;
    },
    getDateList() {
      this.showOrHide();
      const params = {};
      params.b0101 = this.dateList.b0101;
      if (this.dateList.b0101) {
        this.$nextTick(() => {
          this.$http.post(getPointInfo, params).then((res) => {
            this.dateList = res.result;
            if(this.dateList.b0119Data){
              this.b0119Data = JSON.parse(this.classify.b0119Data)
              // console.log(this.b0119Data)
            }
            if(this.dateList.b0120Data){
              this.b0120Data = JSON.parse(this.dateList.b0120Data)
            }
            this.handleTabClick("baseInfo");
          });
        });
      } else {
        this.handleTabClick("baseInfo");
      }
    },
    handleTabClick(key) {
      this.tabKey = key;
      if (key === "baseInfo") {
        //基本信息
        this.$nextTick(() => {
          this.$refs.pointInfoBaseInfoRef.editFlag = this.saveFlag;
          this.$refs.pointInfoBaseInfoRef.formData = this.dateList;
          this.$refs.pointInfoBaseInfoRef.pickUp();
        });
      } else if (key === "mediaInfo") {
        //媒体信息
        this.$nextTick(() => {
          this.$refs.mediaInfoRef.editFlag = this.saveFlag;
          if (
            !this.dateList.b02VOList ||
            this.dateList.b02VOList.length === 0
          ) {
            this.dateList.b02VOList = [];
          }
          this.$refs.mediaInfoRef.mediaInfoList = this.dateList.b02VOList;
          // this.$refs.mediaInfoRef.init();
        });
      } else if (key === "responsibility") {
        //责任矩阵
        this.$refs.responsibilityRef.editFlag = true;
        this.$nextTick(() => {
          this.$refs.responsibilityRef.init(this.b0101)
        });
      } else if (key === "monitor") {
        //监测设备
        this.$nextTick(() => {
          this.$refs.monitorRef.editFlag = this.saveFlag;
          this.$refs.monitorRef.tableData = this.dateList.b03VOList;
        });
      } else if (key === "scope") {
        //保护范围
        this.$nextTick(() => {
          this.$refs.scopeRef.editFlag = this.saveFlag;
        });
      } else if (key === 'spatialEditing'){
      }
    },
    saveOrUpdate() {
      return new Promise((resolve, reject) => {
        // this.dateList.b03VOList = this.$refs.monitorRef.$refs.tableRef.getTableData().tableData
        const formData = JSON.parse(JSON.stringify(this.dateList))
        if(this.pointInfoScopeFileList1.length > 0){
          formData.b0119 = this.pointInfoScopeFileList1[0].showId
          formData.b0119Data = JSON.stringify(this.pointInfoScopeFileList1[0].datas)
        }
        if(this.pointInfoScopeFileList2.length > 0){
          formData.b0120 = this.pointInfoScopeFileList2[0].showId
          formData.b0120Data = JSON.stringify(this.pointInfoScopeFileList2[0].datas)
        }
        formData.b02VOList = []
        formData.b03VOList = []
        if (this.$refs.mediaInfoRef) {
          this.$refs.mediaInfoRef.mediaInfoList.forEach((item) => {
            if (item.flag) {
              formData.b02VOList.push(item);
            }
          });
          this.$refs.mediaInfoRef.mediaInfoListForDel.forEach((item) => {
            if (item.flag) {
              formData.b02VOList.push(item);
            }
          });
        }
        if (this.$refs.monitorRef) {
          this.$refs.monitorRef.$refs.tableRef
            .getTableData()
            .tableData.forEach((item) => {
              if (item.flag) {
                formData.b03VOList.push(item);
              }
            });
          this.$refs.monitorRef.tableDataForDel.forEach((item) => {
            if (item.flag) {
              formData.b03VOList.push(item);
            }
          });
        }
        resolve(formData);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.r-wrap {
  width: 100%;
  //padding: 20px;
  box-sizing: border-box;

  .r-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 2vh;

    li {
      flex: 0 0 auto;
      width: 102px;
      height: 32px;
      line-height: 32px;
      margin-left: 20px;
      background: url("@/assets/img/dialog-selected.svg") no-repeat;
      background-size: 102px 32px;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
      color: #fff;

      &.active {
        color: red;
        background: url("@/assets/img/dialog-unselect.svg") no-repeat;
      }
    }
  }

  .r-content {
    height: 68vh;
    margin-top: 2vh;
    overflow: auto;
  }

  .tabs-box {
    .tabs-item {
      margin-right: 20px;
    }
  }
}
</style>
